<template>
	<div class="container">
		<template v-for="(img, index) in cardList" :key="index">
			<div
				@click="toggleActive(index)"
				:class="['panel', img.active ? 'active' : '']"
				:style="{
					backgroundImage: 'url(' + img.url + ')',
				}"
			>
				<h3>{{ img.title }}</h3>
			</div>
		</template>
	</div>
</template>

<script setup lang="ts">
	let toggleActive: (index: number) => void;
	// 切换active
	toggleActive = index => {
		cardList.value.forEach((item, i) => {
			item.active = i === index ? true : false;
		});
	};
	// 卡片数据（注意vite下url的获取和使用）
	const cardList = ref<{ [prop: string]: any }[]>([
		{
			title: "one",
			active: true,
			url: new URL("../../assets/imgs/001.jpg", import.meta.url).href,
		},
		{
			title: "two",
			active: false,
			url: "src/assets/imgs/002.jpg",
		},
		{
			title: "three",
			active: false,
			url: "src/assets/imgs/003.png",
		},
		{
			title: "four",
			active: false,
			url: "src/assets/imgs/004.jpg",
		},
		{
			title: "five",
			active: false,
			url: "src/assets/imgs/005.jpg",
		},
	]);
</script>

<style scoped lang="scss">
	@import "./index.scss";
</style>
